import React, { Component } from 'react'
import { API } from '../../../../utils/api'
import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'

import styles from './index.module.css'

import { Spring } from 'react-spring/renderprops'

// 筛选条件栏 标题高亮状态
const titleSelectedStatus = {
  area: false,
  mode: false,
  price: false,
  more: false
};
// 筛选条件的选中值对象
const selectedValues = {
  area: ["area", "null"],
  mode: ["null"],
  price: ["null"],
  more: []
};

export default class Filter extends Component {

  state = { 
    // 存储标题高亮显示状态
    titleSelectedStatus,
    // 控制 FilterPicker 显示和隐藏
    openType: '',
    // 存储服务器返回的所有符合筛选条件的数据
    filterDatas: {},
    // 存储筛选条件下默认选中的状态
    selectedValues
  }
  
  componentDidMount() {
    this.getFilterData()
    // 获取 body 元素 并存储在this中
    this.htmlBody = document.body
  }

  // 封装获取所有筛选条件数据的请求
  async getFilterData() {
  // 发起axios请求获取数据
    const { value } = JSON.parse(localStorage.getItem("hkzf_city"))
    const res = await API.get(`/houses/condition?id=${value}`)
  //  console.log(res);
  // 把获取到的数据存储为组件状态
   this.setState({
     filterDatas: res.data.body
   })
  }

  // 标题栏点击事件
  onTitleClick = (type) => {
    // 打开遮罩层时 给body添加样式 禁用页面滚动
    this.htmlBody.className = 'body-scroll'

    const { titleSelectedStatus, selectedValues } = this.state
    // 根据当前标题选中状态对象 创建一个新的标题选中状态对象
    const newTitleSelectedStatus = { ...titleSelectedStatus }
    Object.keys(titleSelectedStatus).forEach(key => {
      // console.log(key,type)
      // 先判断是否为当前标题后 如果是 就让该标题选中状态为true
      // 也就是要判断 遍历出的所有key值 是否和当前鼠标点击的type值相等 如果相等 就把当前鼠标点击的type状态改为true(高亮)
      if (key === type) {
        newTitleSelectedStatus[type] = true
        // console.log(newTitleSelectedStatus);
        return // forEach中 return 无法跳出循环 不知道这里的return有什么用
      }
      // 再判断其他标题key是否有选中值
      // selectedVal 表示当前 标题 是否有选中值
      const selectedVal = selectedValues[key] // 不可以用type
      // console.log(selectedVal);
      if (
        key === "area" && (selectedVal.length !== 2 ||
        selectedVal[0] !== "area")
      ) { // 表示 area 此时已经有选中值
        newTitleSelectedStatus[key] = true;
      } else if (key === "mode" && selectedVal[0] !== "null") { // 表示 mode 此时已经有选中值
        newTitleSelectedStatus[key] = true;
      } else if (key === "price" && selectedVal[0] !== "null") { // 表示 price 此时已经有选中值
        newTitleSelectedStatus[key] = true;
      } else if (key === "more" && selectedVal.length !== 0) { // 表示 more 此时有选中值 那么就让 more 高亮显示
        // 更多选择
        newTitleSelectedStatus[key] = true;
      } else {
        newTitleSelectedStatus[key] = false;
      }
    } )
    // console.log(newTitleSelectedStatus);
    this.setState({ 
      // 点击后显示遮罩层和FilterPicker组件
      openType: type,
      // 把新创建的标题选中状态对象赋值给 高亮状态
      titleSelectedStatus: newTitleSelectedStatus
     })



    // // console.log(type);
    // this.setState({ 
    //   // 这里使用ES6的属性名表达式来修改对象中的值 实现点击后高亮显示
    //   titleSelectedStatus: { ...this.state.titleSelectedStatus, [type]: true },
    //   // 点击后显示遮罩层和FilterPicker组件
    //   openType: type
    //  })
  }

  // 取消事件(隐藏遮罩层和FilterPicker组件)
  onCancel = (type) => {
    // console.log(type);
    // 关闭遮罩层时 取消body样式 允许页面滚动
    this.htmlBody.className = ''
    // 判断当前标题是否有选中值 如果没有选中的值就取消高亮
    const { titleSelectedStatus,selectedValues } = this.state
    // 根据当前标题选中状态对象 创建一个新的标题选中状态对象
    const newTitleSelectedStatus = { ...titleSelectedStatus }
     // selectedVal 表示当前 标题 是否有选中值
     const selectedVal = selectedValues[type] // 这里被选中的值就是 子组件传递过来的value
     // console.log(selectedVal);
     if (
       type === "area" && (selectedVal.length !== 2 ||
       selectedVal[0] !== "area")
     ) { // 表示 area 此时已经有选中值
       newTitleSelectedStatus[type] = true;
     } else if (type === "mode" && selectedVal[0] !== "null") { // 表示 mode 此时已经有选中值
       newTitleSelectedStatus[type] = true;
     } else if (type === "price" && selectedVal[0] !== "null") { // 表示 price 此时已经有选中值
       newTitleSelectedStatus[type] = true;
     } else if (type === "more" && selectedVal.length !== 0) { // 表示 more 此时有选中值 那么就让 more 高亮显示
       // 更多选择
       newTitleSelectedStatus[type] = true;
     } else {
       newTitleSelectedStatus[type] = false;
     }

    
    this.setState({
      openType: '',
      // 把新创建的标题选中状态对象赋值给 高亮状态
      titleSelectedStatus: newTitleSelectedStatus
    })
  }

  // 保存事件(隐藏遮罩层和FilterPicker组件 还要获取并传递数据)
  onSave = (type, value) => {
    // console.log(type, value); // 接收FilterPicker子组件传递过来的选中状态
    // 关闭遮罩层时 取消body样式 允许页面滚动
    this.htmlBody.className = ''
    // 判断当前标题是否有选中值 如果没有选中的值就取消高亮
    const { titleSelectedStatus } = this.state
    // 根据当前标题选中状态对象 创建一个新的标题选中状态对象
    const newTitleSelectedStatus = { ...titleSelectedStatus }
     // selectedVal 表示当前 标题 是否有选中值
     const selectedVal = value // 这里被选中的值就是 子组件传递过来的value
     // console.log(selectedVal);
     if (
       type === "area" && (selectedVal.length !== 2 ||
       selectedVal[0] !== "area")
     ) { // 表示 area 此时已经有选中值
       newTitleSelectedStatus[type] = true;
     } else if (type === "mode" && selectedVal[0] !== "null") { // 表示 mode 此时已经有选中值
       newTitleSelectedStatus[type] = true;
     } else if (type === "price" && selectedVal[0] !== "null") { // 表示 price 此时已经有选中值
       newTitleSelectedStatus[type] = true;
     } else if (type === "more" && selectedVal.length !== 0) { // 表示 more 此时有选中值 那么就让 more 高亮显示
       // 更多选择
       newTitleSelectedStatus[type] = true;
     } else {
       newTitleSelectedStatus[type] = false;
     }

    // this.onCancel()
    this.setState(() => {
      return {
        openType: '',
        selectedValues: { ...this.state.selectedValues, [type]: value },
        // 把新创建的标题选中状态对象赋值给 高亮状态
        titleSelectedStatus: newTitleSelectedStatus
      }
    },
      () => {
        // 设置最终的筛选数据格式
        let filters = {}
        const { area, mode, price, more } = this.state.selectedValues
        // 筛选 area 区域
        const areaKey = area[0]
        let areaValue = "null"
        if (area.length === 3) {
          areaValue = area[2] !== "null" ? area[2] : area[1]
        }
        filters[areaKey] = areaValue
        // 筛选 mode 方式
        filters.mode = mode[0];
        // 筛选 price 租金
        filters.price = price[0];
        // 筛选 more 更多
        filters.more = more.join(",");
        // console.log('筛选出的选中数据：', filters);
        
        // 接收父组件HouseList传递过来的函数 并把filters传递给父组件
        this.props.onFilter(filters)
    }
    )
  }

  // 封装渲染FilterPicker组件的函数
  renderFilterPicker = () => {
    const { openType, filterDatas: { area, subway, rentType, price },selectedValues } = this.state
    // 定义符合FilterPicker组件数据格式要求的空数据
    let data = []
    // FilterPicker 组件对分栏有要求 所以还要再定义一个 col
    let col = 3 // 默认分三栏显示
    // 定义不同类型下的默认选中状态
    const defaultSelected = selectedValues[openType]
    // 根据筛选条件类型获取不同类型下的筛选条件数据
    switch (openType) {
      case 'area':
        data = [area, subway]
        col = 3
        break;
      case 'mode':
        data = rentType
        col = 1
        break;
      case 'price':
        data = price
        col = 1
        break;
    
      default:
        break;
    }
    if (openType !== 'area' && openType !== 'mode' && openType !== 'price') {
      return ('')
    }
    return (<FilterPicker key={openType} onCancel={this.onCancel} onSave={this.onSave} data={data} col={col} type={openType} defaultSelected={ defaultSelected }/>)
  }
  // 封装渲染FilterMore组件的函数
  renderFilterMore = () => {
    const { openType, filterDatas: { roomType, oriented, floor, characteristic },selectedValues } = this.state
    let data = { roomType, oriented, floor, characteristic }
    let defaultSelectedValues = selectedValues.more
    if (openType !== 'more') {
      return null
    }
    return (
      <FilterMore data={data} type={openType} onSave={this.onSave} onCancel={this.onCancel} defaultSelectedValues={ defaultSelectedValues }/>
    )
  }
// 实现遮罩层动画效果
  renderMask() {
    const { openType } = this.state

    const isHide = openType === 'more' || openType === ''

    return (
      <Spring from={{ opacity: 0 }} to={{ opacity: isHide ? 0 : 1 }}>
        {props => {
          // 说明遮罩层已经完成动画效果，隐藏了
          if (props.opacity === 0) {
            return null
          }

          return (
            <div
              style={props}
              className={styles.mask}
              onClick={() => this.onCancel(openType)}
            />
          )
        }}
      </Spring>
    )
  }
  render() {
    const { titleSelectedStatus } = this.state
    return (
      <div className={styles.root}>
        {/* 前三个菜单的遮罩层 */}
        {
            this.renderMask()
          }
        {/* <div className={styles.mask} /> */}

        <div className={styles.content}>
          {/* 标题栏 */}
          <FilterTitle titleSelectedStatus={ titleSelectedStatus } onClick={ this.onTitleClick }/>

          {/* 前三个菜单对应的内容： */}
          {
            this.renderFilterPicker() 
          }
          {/* <FilterPicker /> */}

          {/* 最后一个菜单对应的内容： */}
          {/* <FilterMore /> */}
          { this.renderFilterMore() }
        </div>
      </div>
    )
  }
}
